<template>
  <div style="width: 100%;height: 100%;">
    <el-backtop :bottom="60"></el-backtop>
    <el-page-header style="margin-top: 10px; margin-bottom: 10px;" @back="goBack" content="所有医师"></el-page-header>
    <div style="padding: 10px 0">
      <el-input style="width: 80%;" size="medium" placeholder="请输入医师姓名" suffix-icon="el-icon-search" v-model="nickname"></el-input>
      <el-button class="ml-5" size="medium" type="primary" @click="load" plain>搜索</el-button>
      <el-button class="ml-5" size="medium" type="warning" @click="reset" plain>重置</el-button>
    </div>

    <el-card>
      <div style="margin-bottom: 10px"><span class="s1" style="padding-right: 10px; margin-right: 10px; border-right: solid 1px grey">科室选择</span><el-button style="border: 0; color: #0d6efd" @click="clickDep(item.name)" v-for="item in deps" :key="item.id">{{ item.name }}</el-button></div>
      <div style="margin-bottom: 10px"><span class="s1" style="padding-right: 10px; margin-right: 10px; border-right: solid 1px grey">医院等级</span><el-button style="border: 0; color: #0d6efd" @click="clickGrade(grade)" v-for="grade in grades" :key="grade" >{{ grade }}</el-button></div>
      <div style="margin-bottom: 10px"><span class="s1" style="padding-right: 10px; margin-right: 10px; border-right: solid 1px grey">医生职称</span><el-button style="border: 0; color: #0d6efd" @click="clickIdentity(item)" v-for="item in identities" :key="item" >{{ item }}</el-button></div>
    </el-card>

    <el-empty description="暂无医生" v-if="physicians.length === 0"></el-empty>
    <div v-else>
      <div style="margin-bottom: 10px; margin-left: 10px; margin-top: 5px">
        <span style="color: gray; font-size: 10px; ">共 {{total}} 位医师</span>
      </div>
      <div style=" border: 1px solid beige; border-radius: 10px; margin-top: 10px; padding-left: 10px">
        <el-row :gutter="5">
          <el-col :span="6" v-for="phy in physicians" :key="phy.id" style="text-align: center;margin-bottom: 8px">
            <el-card :body-style="{ padding: '0px' }">
              <el-avatar style="margin-top: 10px" shape="circle" :size="100" :src="phy.photo"></el-avatar>
              <!--                <img :src="dep.photo" class="image" style="width: 100px; height: 100px;">-->
              <div style="padding: 14px;">
                <span style="color: #0d6efd">{{phy.nickname }}</span> <span>{{phy.identity}}</span><br/>
                <span class="s1">{{phy.department.name}}</span><br/>
                <span class="s1">{{phy.hospital.name}}</span><br/>
                <!--评分与问诊量-->
                <span class="s1">评分 </span><span class="s1" v-if="phy.score === null">暂无评分</span>
                <span style="color: orange; font-size: 10px">{{phy.score}}</span>
                <span class="s1" style="margin-left: 5px">问诊量 </span><span class="s2" v-if="phy.num === null">0</span>
                <span style="font-size: 10px">{{phy.num}}</span>

                <div class="bottom clearfix" style="border-top: dashed gray 1px; margin-top: 5px">
                <span class="擅长" style="line-height:1.5; font-size: 10px;
                      width: 250px; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: inline-block;"
                      :title="phy.specialty"
                >擅长：{{ phy.specialty }}</span><br/>
                  <el-button type="info" plain @click="handleOrder(phy)">挂号</el-button>
                  <el-button type="primary" plain @click="handleWen">问诊</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PhysicianList",
  data() {
    return {
      physicians: {},
      total: 0,
      name: "",
      nickname: "",
      identity: "",
      grade: "",
      deps: {},
      grades: ["三级甲等","三级医院","二级医院","一级医院","其他"],
      identities: ["主任医师","副主任医师","主治医师"]
    }
  },
  created() {
    this.load()
    this.findDep()
  },
  methods: {
    findDep(){
      this.request.get("/department/list").then(res => {
        console.log(res)
        this.deps = res
      })
    },
    clickGrade(grade) {
      this.name = ""
      this.type = ""
      this.address = ""
      this.grade = grade
      this.load()
    },
    clickDep(name) {
      this.nickname = ""
      this.identity = ""
      this.grade = ""
      this.name = name
      this.load()
    },
    clickIdentity(identity) {
      this.nickname = ""
      this.identity = identity
      this.grade = ""
      this.name = ""
      this.load()
    },
    load() {
      this.request.get("/physician/findAllPhy", {
        params: {
          nickname: this.nickname,
          identity: this.identity,
          grade: this.grade,
          name: this.name
        }
      }).then(res => {
        console.log(res)
        this.physicians = res.data
        this.total = res.total
      })
    },
    reset() {
      this.nickname = ""
      this.identity = ""
      this.grade = ""
      this.name = ""
      this.load()
    },
    goBack() {
      this.$router.back()
    },
    handleOrder(phy){
      console.log(phy)
      this.$router.push({path: '/front/phyInfo', query: {physician: phy}})
    },
    handleWen(){
      this.$router.push("/front/im")
    },
  }
}
</script>

<style scoped>

</style>
